<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" />
<script type="text/javascript" th:src="@{/laydate/laydate.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<style type="text/css">
  #date{
    padding-right: 0;
    height: 32px;
    line-height: 32px;
  }
</style>
</head>
<!--获取thymeleaf参数-->
<script th:inline="javascript">
  var a=[[${user[0].job.jobName}]]
  var b=[[${user[0].job.jobId}]]
  var bir=[[${user[0].birthday}]]
</script>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>系统管理</li>
    <li>用户管理</li>
    <li>修改</li>
  </ul>
</div>
<div class="formbody">
  <div class="formtitle"><span>员工信息</span></div>
  <form id="updateUsers" th:action="@{/sys/users/doUpdate}" method="post">
  <input type="hidden" name="uId" th:value="${user[0].uId}"/>
    <ul class="forminfo">
      <li>
        <label>员工姓名</label>
        <input id="uname" name="uname" type="text" class="dfinput" th:value="${user[0].uname}"/>
        <i>必填，不能超过30个字符</i>
      </li>
      <li>
        <label>密码</label>
        <input id="upassword" name="upassword" type="password" class="dfinput" th:value="${user[0].upassword}"/>
        <i>必填，不能超过30个字符</i>
      </li>
      <li>
        <label>性别</label>
        <cite>
          <input name="sex" type="radio" value="1" th:checked="${user[0].sex==1}"/>男
          &nbsp;&nbsp;&nbsp;&nbsp;
          <input name="sex" type="radio" value="2" th:checked="${user[0].sex==2}"/>女
        </cite>
      </li>
      <li>
        <label>联系方式</label>
        <input id="utelephone" name="utelephone" type="text" th:value="${user[0].utelephone}" class="dfinput"/>
        <i>必填，不能超过30个字符</i>
      </li>
      <li>
        <label>出生年月</label>
        <input id="date" name="birthday" type="text" th:value="${user[0].birthday}" class="dfinput laydate-icon demo-input" placeholder="请选择日期" />
      </li>
      <input type="hidden" th:value="${user[0].jobId}" id="jobId"/>
      <li>
        <label>所属部门</label>
        <select id="deptId" name="deptId" class="dfselect" onchange="getJobs(this.value)">
          <option value="">请选择部门</option>
          <option th:each="d:${session.dlist}"
                  th:value="${d.deptId}" th:text="${d.deptName}" th:selected="${d.deptId==user[0].deptId}">研发</option>
        </select>
      </li>
      <li>
        <label>职位</label>
        <select id="jo" name="jobId" class="dfselect">
          <option value="">请选择</option>
        </select>
      </li>
      <li>
        <label>&nbsp;</label>
        <input onclick="updateUsers()" type="button" class="btn" value="确认保存"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="" type="button" class="btn" value="返回" onclick="window.history.go(-1);"/>
      </li>
    </ul>
  </form>
</div>
<script type="text/javascript">
  //执行一个laydate实例
  laydate.render({
    elem:'#date'
  });

</script>
<!--修改用户表单验证-->
<script>
  $(function () {
    $("#uname").blur(function () {
      ckuname();
    });

    $("#upassword").blur(function () {
      ckupassword();
    });
    $("#utelephone").blur(function () {
      ckutelephone();
    });
    $("#date").blur(function () {
      ckdate();
    });
    $("#deptId").blur(function () {
      ckdeptId();
    });
    $("#jo").blur(function () {
      ckjobId();
    });
  });
  function ckuname() {
    if($("#uname").val()==""){
      return false;
    }else{
      return true;
    }
  }
  function ckupassword() {
    if($("#upassword").val()==""){
      return false;
    }else{
      return true;
    }
  }
  function ckutelephone() {
    if($("#utelephone").val()==""){
      return false;
    }else{
      return true;
    }
  }
  function ckdate() {
    if($("#date").val()==""){
      return false;
    }else{
      return true;
    }
  }
  function ckdeptId() {
    if($("#deptId").val()==""){
      return false;
    }else{
      return true;
    }
  }
  function ckjobId() {
      if($("#jo").val()==""){
        return false;
      }else{
        return true;
      }
  }
  function updateUsers() {
    if(ckuname()&&ckupassword()&&ckutelephone()&&ckdate()&&ckdeptId()&&ckjobId()){
      $("#updateUsers").submit();
    }else{
      confirm("修改用户失败！");
    }
  }
  $("#deptId").change(function (){
    $.ajax({
      url: "/sys/users/job",
      data:{jobDeptId:$("#deptId").val()},
      type: "post",
      datatype: "json",
      success: function (data) {
        var str="<option value=\"\">请选择</option>"
        for (var i=0;i<data.length;i++){
          str+="<option value=\""+data[i].jobId+"\">"+data[i].jobName+"</option>"
        }
        $("#jo").html(str)
      }
    });
  })
  /*日期换字符串*/
  function setDefaultDate() {
    var nowDate = new Date(bir);
    var month = nowDate.getMonth() + 1;
    var day = nowDate.getDate();
    month = (month.toString().length == 1) ? ("0" + month) : month;
    day = (day.toString().length == 1) ? ("0" + day) : day;
    //当前日期 yyyy-MM-dd
    return nowDate.getFullYear() + '-' + month + '-' + day;
  }
  $(function (){
    var str="<option value=\""+b+"\" selected>"+a+"</option>";
    $("#jo").html(str)
    /*调用日期转字符串方法*/
    $("#date").val(setDefaultDate())
  })
</script>
</body>
</html>
